import React, { Component } from 'react'
import { Link, Route, Redirect, Switch } from 'react-router-dom'
// 引入二级组件 Mine1 和 Mine2
import Mine1 from './Mine1'
import Mine2 from './Mine2'
import Notfind from './Notfind'
// 嵌套路由规则:
// 步骤1: 需要在一级路由组件中定义Route 坑, 并配置路由规则
// 步骤2: 嵌套路由的路由规则path 一定要拼接上一级路由

// 实现默认显示二级组件
// 方式1: 使用Redicect组件  from='/mine' to='/mine/mine1'
// 方式2: path='' compoent={二级组件}
export default class Mine extends Component {
    render() {
        return (
            <div>
                <p>Mine</p>
                <Link to='/mine/mine1'>mine1导航</Link>
                <Link to='/mine/mine2'>mine2导航</Link>
                {/* 设置二级路由规则及二级路由规则匹配后的坑 */}
                <Switch>
                    <Route path='/mine/mine1' component={Mine1}></Route>
                    <Route path='/mine/mine2' component={Mine2}></Route>
                    <Redirect from='/mine' to='/mine/mine1' exact></Redirect>
                    {/* <Route path='' component={Mine2}></Route> */}
                    <Route component={Notfind}></Route>
                </Switch>
            </div>
        )
    }
}
